<template>
	<!-- 项目名称 -->
	<view class="content">
		<view class="text-area">
			<text class="wz">保定</text>
			<image class="ding" src="../../static/dingw.png" mode=""></image>
			<text class="title">{{ title }}</text>
		</view>

		<!-- 搜索框   @click="GoSearch() -->
		<view class="search-bar">
			<view class="search-input flex align-center">
				<input type="text" class="iconfont iconsousuokuang" value="请输入您想搜索的职务" />
				<!-- <input type="text">点击搜索</text> -->
				<image class="ss" src="../../static/ss.png" mode=""></image>
			</view>
			<!-- <view class="classify-btn" @click="classify()">
				 可以在这里添加分类按钮的图标或文字 
			</view> -->
		</view>
		<!-- 轮播图 -->
		<view>
			<swiper indicator-dots autoplay>
				<swiper-item v-for="(item, index) in imgList" :key="index">
					<image :src="item" class="slide-image"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播图下面的 -->
		<!-- <view class="mok">
			<view class="zhiwe">
				<text>职务</text>
			</view>
			<view class="shixi">
				<text>实习</text>
			</view>
			<view class="qiye">
				<text>企业</text>
			</view>
			<view class="zhidao">
				<text>指导</text>
			</view>
		</view> -->
		<!-- 最新职位 -->
		<view class="column-zuixin">
			<view class="column-01">
				<text>最新职位</text>
				<text>></text>
			</view>
			<view class="column-02">
				<text>岗位信息</text>
			</view>
			<view class="column-02">
				<text>岗位信息</text>
			</view>
			<view class="column-02">
				<text>岗位信息</text>
			</view>
		</view>
		<!-- 热门企业 -->
		<view class="column-rmqy">
			<view class="column-01">
				<text>热门企业</text>
				<text>></text>
			</view>
			<view class="column-rmqy-gang">
				<view>企业信息</view>
				<view>企业信息</view>
				<view>企业信息</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '就业服务平台小程序', // 假设项目名称为'项目名称'
			imgList: [
				'https://q9.itc.cn/images01/20240801/059476da07d9491594d5b4f60f05670a.jpeg',
				'https://i-blog.csdnimg.cn/blog_migrate/8648165e6f96edb7b61c9b4952d6d72e.jpeg#pic_center',
				'https://pic.rmb.bdstatic.com/bjh/events/2d3b51c95fbed4bc25a344f26fcb81b17552.png@h_1280',
				'https://inews.gtimg.com/om_bt/ObrdBhRCq7G6mM0uMU43QAgaKrMmy6y64pr1_Vq0RWeVAAA/1000'
			]
		};
	},
	onLoad() {},
	// 监听原生搜索框的点击事件
	onNavigationBarSearchInputClicked() {
		console.log('在这里指定我们的跳转路径');
		// uni.navigateTo({
		// 		url: '../qiye/qiye'
		// 	});
	},
	// 监听原生标题栏按钮的点击事件
	onNavigationBarButtonTap(e) {
		// console.log('监听到了原生标题栏按钮的点击事件' + e.text);
	},
	methods: {
		GoSearch() {
			console.log('跳转到搜索页');
			// 实现跳转逻辑
			uni.navigateTo({
				// url: '/pages/PersonalCenter/PersonalCenter'
			});
		},
		classify() {
			console.log('点击了分类按钮');
			// 实现分类按钮逻辑
		}
	}
};
</script>

<style>
.slide-image {
	width: 100%;
	height: 300px;
}
swiper {
	width: 100%;
	height: 240px;
}

.content {
	/* width: 100%; */
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	justify-content: center;
	margin: 0 auto;
}

.text-area {
	width: 800rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	justify-self: row;
}
.ding {
	width: 50rpx;
	height: 50rpx;
	margin-top: 26rpx;
	margin-left: -44rpx;
}

.wz {
	font-size: 38rpx;
	color: #27abcf;
	text-align: center;
	font-weight: bold;
	margin-top: 20rpx;
}
.ss {
	width: 55rpx;
	height: 57rpx;
	float: right;
	margin-right: 3rpx;
	margin-top: -69rpx;
}

.title {
	width: 540rpx;
	font-size: 42rpx;
	color: #0064cf;
	text-align: center;
	font-weight: bold;
	margin-top: 20rpx;
}

.search-bar {
	display: flex;
	align-items: center;
	height: 52px;
	background-color: #fff;
	z-index: 1000;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 0 10px;
	margin-top: 10px;
}

.search-input {
	flex: 1;
	height: 83rpx;
	background-color: #f6f7f8;
	color: #959fa0;
	border-radius: 20px;
	padding: 5px 10px;
}

.search-input .iconfont {
	margin-right: 8px;
	font-size: 14px;
	height: 81rpx;
}

.mok {
	width: 688rpx;
	height: 100rpx;
	display: flex;
	/* flex-direction: column; */
	/* align-items: center; */
	justify-content: space-between;
	margin: 14px auto;
}
.mok view {
	background-color: #0064cf;
	width: 160rpx;
	height: 100rpx;
	color: #fff;
	text-align: center;
	line-height: 50px;
}

.column-zuixin {
	width: 100%;
	height: 356rpx;
	background-color: #a3a3a3;
	margin: 10px auto;
}
.column-01 {
	display: flex;
	justify-content: space-between;
	font-size: 38rpx;
	font-weight: bold;
	padding: 18rpx;
}
.column-02 text {
	display: block;
	/* width: 688rpx; */
	height: 100rpx;
	line-height: 110rpx;
	border-bottom: 1rpx solid #f6f7f8;
	text-align: center;
	font-size: 34rpx;
	color: #fff;
	background-color: steelblue;
}
.column-rmqy {
	width: 100%;
	height: 390rpx;
	background-color: #a3a3a3;
	margin: 30px auto;
}
.column-rmqy-gang {
	width: 688rpx;
	display: flex;
	justify-self: row;
	margin: 0 auto;
}
.column-rmqy-gang view {
	width: 300rpx;
	height: 200rpx;
	background-color: steelblue;
	padding: 20rpx;
	margin: 10px auto;
	margin-right: 3px;
	justify-content: space-between;
}

/* 添加必要的全局样式 */
page {
	font-family: Arial, sans-serif;
	background-color: #f8f8f8;
}
</style>
